<template>
	<div class="randomImg">
		<table>
			<tr>
				<td class="td"><el-button type="primary" @click="createImg" size="medium">点击生成</el-button></td>
			</tr>
			<tr>
				<td class="td">
					<img class="img" v-if="addr" :src="addr" />
				</td>
			</tr>
		</table>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				addr: "",
			}
		},
		methods: {
			createImg(){
				this.addr = require("../assets/other/loading.gif");
				let x = Math.round(Math.random());
				var _this = this;
				if(x==1){
					this.$axios.get("https://dog.ceo/api/breeds/image/random").then(
						function(response){
							// console.log(response.data.message);
							_this.addr = response.data.message;
						},
						function(err){}
					)
				}else{
					this.$axios.get("https://api.thecatapi.com/v1/images/search?limit=1").then(
						function(response){
							// console.log(response.data[0].url);
							_this.addr = response.data[0].url;
						},
						function(err){}
					)
				}
			},
		},
	}
</script>

<style scoped>
	.randomImg table tr td {
		height: 33px;
		text-align: left;
	}
	.randomImg .img{
		width: 100%;
	}
</style>